<template>
	<div class="productList">
		<el-card shadow="hover">
			<div class="product-list-search mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="8">
							<el-form-item prop="keyword" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="productId" label="商品ID" style="width: 100%">
								<el-input maxlength="200" v-model.number="searchForm.productId" placeholder="商品ID" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="productCategoryId" label="分类" style="width: 100%">
								<CateSelector v-model="searchForm.productCategoryId" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="coupon" label="优惠活动" style="width: 100%">
								<el-select v-model="searchForm.coupon" clearable style="width: 100%">
									<el-option v-for="(item, index) in couponList" :key="index" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="publishStatus" label="是否上架" style="width: 100%">
								<el-select v-model="searchForm.publishStatus" clearable style="width: 100%">
									<el-option label="全部" value=" "></el-option>
									<el-option label="是" :value="1"></el-option>
									<el-option label="否" :value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="newStatus" label="是否新品" style="width: 100%">
								<el-select v-model="searchForm.newStatus" clearable style="width: 100%">
									<el-option label="全部" value=" "></el-option>
									<el-option label="是" :value="1"></el-option>
									<el-option label="否" :value="0"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="publishTimeStart" label="上架时间" style="width: 100%">
								<DatePicker v-model:start="searchForm.publishTimeStart" v-model:end="searchForm.publishTimeEnd" />
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="priceStart" label="售价" style="width: 100%">
								<div class="price">
									<el-input-number v-model="searchForm.priceStart" :controls="false" :step="2" step-strictly />
									<span style="margin: 0 10px">至</span>
									<el-input-number v-model="searchForm.priceEnd" :controls="false" :step="2" step-strictly />
								</div>
							</el-form-item>
							<el-form-item prop="priceEnd"></el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item prop="currency" label="币种" style="width: 100%">
								<el-select v-model="searchForm.currency" clearable style="width: 100%">
									<el-option label="英镑" value="UK"></el-option>
									<el-option label="美元" value="US"></el-option>
									<el-option label="欧元" value="EU"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div>
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="3">
							<el-button type="success" @click="toAdd">新增商品</el-button>
						</el-col>
						<el-col :span="16" class="center">
							<el-button-group>
								<el-button color="#626aef" @click="multipleUpShelf" :disabled="multipleSelection.length === 0">上架</el-button>
								<el-button v-if="!isOffShelves" color="#626aef" @click="multipleDownShelf" :disabled="multipleSelection.length === 0">下架</el-button>
								<el-button color="#626aef" @click="cancelNew" :disabled="multipleSelection.length === 0">取消新品标识</el-button>
							</el-button-group>
							<el-button-group class="ml-4">
								<el-button color="#626aef" @click="exportQATemp">导出问答模板</el-button>
								<el-button color="#626aef" @click="exportProdTemp">导出商品模板</el-button>
								<el-button color="#626aef" @click="exportProd" :disabled="multipleSelection.length === 0">导出商品</el-button>
							</el-button-group>
						</el-col>
						<el-col :span="5" class="right_btn">
							<UploadBtn btnName="导入问答" :uploadUrl="`/product/admin/excel/addQuestionReply`" style="margin-left: 10px"> </UploadBtn>
							<UploadBtn btnName="导入商品" :uploadUrl="`/product/admin/excel/addProduct`" style="margin: 0 10px"> </UploadBtn>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" table-layout="auto" style="width: 100%" height="480" @selection-change="handleSelectionChange" class="sku_table">
				<el-table-column type="selection" width="55" />
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="排序">
					<template #default="scope">
						<div class="sort_text" v-if="!scope.row.isSort">
							<el-button text @click="toSort(scope.row)" type="primary">{{ scope.row.sort || '点击设置排序' }}</el-button>
							<!-- <el-link href="javascript:;" @click="toSort(scope.row)">{{ scope.row.sort || '点击设置排序' }}</el-link> -->
						</div>
						<div class="sort_input" v-else>
							<el-input maxlength="100" v-model="currentSort" placeholder="请输入排序" clearable></el-input>
							<div class="btn_box" style="padding-top: 5px">
								<el-button size="small" type="primary" @click="toSaveSort">提交</el-button>
								<el-button size="small" @click="scope.row.isSort = flase">取消</el-button>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="pic" label="商品图">
					<template #default="scope">
						<img width="60" :src="scope.row.pic" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
				<el-table-column prop="productId" label="商品ID" show-overflow-tooltip />
				<el-table-column prop="skuCode" label="自编SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="externalSku" label="外部SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="supplierSku" label="供应商SKU" width="100" show-overflow-tooltip />
				<el-table-column label="价格">
					<template #default="scope">
						<p v-show="scope.row.usPrice !== undefined && scope.row.usPrice !== null">${{ scope.row.usPrice }}</p>
						<p v-show="scope.row.ukPrice !== undefined && scope.row.ukPrice !== null">£{{ scope.row.ukPrice }}</p>
						<p v-show="scope.row.euPrice !== undefined && scope.row.euPrice !== null">€{{ scope.row.euPrice }}</p>
					</template>
				</el-table-column>
				<el-table-column label="优惠活动" show-overflow-tooltip>
					<template #default="scope">
						<el-link href="javascript:;" class="to_coupon_link" v-for="(item, index) in scope.row.couponMapList" :key="index" @click="toCoupon(item)">
							<el-divider direction="vertical" v-if="index !== 0"></el-divider>
							<span>{{ item.couponName }}</span>
						</el-link>
						<!-- <a href="javascript:;" class="to_coupon_link" v-for="(item, index) in scope.row.couponMapList" :key="index" @click="toCoupon(item)">
							
						</a> -->
					</template>
				</el-table-column>
				<el-table-column prop="sale" label="销量" show-overflow-tooltip />
				<el-table-column prop="stock" label="库存" show-overflow-tooltip />
				<el-table-column label="自定义分类" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.productCategoryName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="上架状态">
					<template #default="scope">
						<span>{{ $filters.publishStatusFormat(scope.row.publishStatus) }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="240px">
					<template #default="scope">
						<el-button text type="primary" @click="toUpShelf(scope.row)" :disabled="scope.row.finish === 0">
							{{ scope.row.publishStatus === 0 ? '上架' : '下架' }}
						</el-button>
						<el-button text @click="toEdit(scope.row)" type="primary">编辑</el-button>
						<el-button text @click="toComment(scope.row)" type="primary">评价</el-button>
						<el-popconfirm title="请确认是否删除？" @confirm="delItem(scope.row.id)">
							<template #reference>
								<el-button text :disabled="scope.row.publishStatus === 1" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup name="ProductList">
import CateSelector from '/@/components/common/CateSelector.vue';
import DatePicker from '/@/components/common/DatePicker.vue';
import UploadBtn from '/@/components/common/upload/UploadBtn.vue';
import { state, useInit, useCouponList, useUpShelf, useWatchRoute, useDel, useSort, useFile, useJump, useNewProd } from './hook';
const { proxy } = getCurrentInstance();
const { isOffShelves } = state;
const multipleSelection = ref([]);
const { init, searchForm, page, tableData, toAdd, toEdit } = useInit();
const { exportQATemp, exportProdTemp, exportProd } = useFile(multipleSelection);
const { couponList } = useCouponList();
const { toUpShelf, multipleUpShelf, multipleDownShelf } = useUpShelf(init, multipleSelection);
init();
useWatchRoute(init);
const { delItem } = useDel(init);
const { currentSort, toSort, toSaveSort } = useSort(init);
const { toComment, toCoupon } = useJump();
const { cancelNew } = useNewProd(init, multipleSelection);
const handleSelectionChange = (val) => {
	multipleSelection.value = val;
};
const formDataRef = ref();
function resetForm() {
	formDataRef.value.resetFields();
}

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
onBeforeMount(() => {
	proxy.mittBus.on('onReloadProductList', () => {
		init();
	});
});
// 页面加载时
onMounted(() => {});
onUnmounted(() => {
	// 取消非本页面调用监听
	proxy.mittBus.off('onReloadProductList', () => {});
});
</script>
<style lang="scss" scoped>
.price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.el-input-number {
		width: 100%;
	}
}
.right_btn {
	text-align: right;
}
.ml-4 {
	margin-left: 15px;
}
.center {
	text-align: center;
}
.el-link {
	margin-right: 8px;
}
</style>
